<template>
	<view class="container">
		<uni-section title="发布货源明细" type="line">
			<view class="example">
				<!-- 基础用法，不包含校验规则 -->
				<uni-forms ref="baseForm" :rules="rules" :model="preFormData" labelWidth="80px">
					<uni-forms-item label="类型" required>
						<uni-easyinput disabled v-model="preFormData.type" placeholder="我是产地(预售)" />
					</uni-forms-item>
					<!-- 照片 -->

					<uni-file-picker style="margin: 20rpx 0 20rpx 0;" title="请上传几张商品图片" limit="9"
						v-model="preFormData.resourceIds" fileMediatype="image" mode="grid" @select="select"
						@progress="progress" @success="success" @fail="fail" @delete="handleDelete" />

					<uni-forms-item label="商品名称" required name="shopName">
						<uni-easyinput v-model="preFormData.shopName" placeholder="请输入要出售的商品名称" />
					</uni-forms-item>
					<uni-forms-item label="产地">
						<uni-data-picker @change="getCity" :localdata="cityData" popup-title="请选择产地城市"
							placeholder="请选择产地城市">
						</uni-data-picker>
					</uni-forms-item>
					<uni-forms-item label="上市时间" required name="purchaseStartDays">
						<uni-datetime-picker type="datetime" return-type="timestamp"
							v-model="preFormData.purchaseStartDays" placeholder="请选择上市时间" />
					</uni-forms-item>
					<uni-forms-item label="协助找车" required>
						<uni-data-select v-model="preFormData.needCar" :localdata="planCarRange">
						</uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="起批量(kg)" required name="purchaseStartNum">
						<uni-easyinput v-model="preFormData.purchaseStartNum" placeholder="请输入起批量" type="number" />
					</uni-forms-item>
					<uni-forms-item label="售卖价格(元/kg)" required name="purchasePrice">
						<uni-easyinput v-model="preFormData.purchasePrice" placeholder="请输入售卖价格" type="number" />
					</uni-forms-item>
					<uni-forms-item label="库存量(kg)" required name="shopPurchaseNum">
						<uni-easyinput v-model="preFormData.shopPurchaseNum" placeholder="请输入库存量" type="number" />
					</uni-forms-item>
					<uni-forms-item label="联系人" required name="userName">
						<uni-easyinput v-model="preFormData.userName" placeholder="请输入联系人姓名" />
					</uni-forms-item>
					<uni-forms-item label="联系电话" required name="userPhone">
						<uni-easyinput v-model="preFormData.userPhone" placeholder="请输入联系电话" />
					</uni-forms-item>

					<uni-forms-item label="详细描述">
						<uni-easyinput type="textarea" v-model="preFormData.shopDescription" placeholder="请输入详细描述..." />
					</uni-forms-item>
					<text>若有其他收费项或者特色，请在此补充。<text
							style="color:rgba(252, 151, 195, 0.6)">平台24小时保护您的安全隐私</text></text>
				</uni-forms>
				<button class="sub-type" type="primary" @click="submit('baseForm')">发布</button>

			</view>
		</uni-section>
	</view>
</template>

<script>
	import cityJson from '@/data/cityData.json'
	import datejs from 'dayjs'
	import {
		add_shop
	} from '@/common/pre-shop.js'
	export default {
		data() {
			return {
				// 基础表单数据
				preFormData: {
					resourceIds: [],

					type: '',
					shopName: '', //货物名称

					address: '', //货源产地
					purchaseStartDays: '', //上市时间
					needCar: 0, //是否需要派车
					purchaseStartNum: '', //起批量
					purchaseStartNumUnit: 'kg', //起批量单位
					purchasePrice: null, //售卖价格
					purchasePriceUnit: '元',
					shopPurchaseNum: '', // 库存量
					shopPurchaseNumUnit: 'kg', //库存量单位
					shopDescription: '', //采购说明
					userPhone: '',
					userName: '',

					//采购周期
					shopUserType: 0,
					purchaseRange: '',
					purchase: 0, //是否是预购
					preUserId: '' //发布人ID
				},
				cityData: cityJson,
				planCarRange: [{
						value: 0,
						text: "是"
					},
					{
						value: 1,
						text: "否"
					}
				],
				// 校验规则
				rules: {
					shopName: {
						rules: [{
							required: true,
							errorMessage: '采购商品名称不能为空'
						}]
					},
					purchaseStartDays: {
						rules: [{
							required: true,
							errorMessage: '上市时间不能为空'
						}]
					},
					purchaseStartNum: {
						rules: [{
							required: true,
							errorMessage: '起购量不能为空'
						}, {
							format: 'number',
							errorMessage: '起购量只能输入数字'
						}]
					},

					purchasePrice: {
						rules: [{
							required: true,
							errorMessage: '售卖价格不能为空'
						}, {
							format: 'number',
							errorMessage: '售卖价格只能输入数字'
						}]
					},
					shopPurchaseNum: {
						rules: [{
							required: true,
							errorMessage: '库存量不能为空'
						}, {
							format: 'number',
							errorMessage: '库存量只能输入数字'
						}]
					},
					recAdress: {
						rules: [{
							required: true,
							errorMessage: '收获地点不能为空'
						}]
					},
					userName: {
						rules: [{
							required: true,
							errorMessage: '联系人姓名不能为空'
						}]
					},
					userPhone: {
						rules: [{
								required: true,
								errorMessage: '联系电话不能为空'
							},
							{
								pattern: '(^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$)',
								errorMessage: '手机号格式不正确'
							}
						]
					},
				}
			}
		},
	 
		onLoad(option) {
			this.preFormData.type = option.info + '(' + option.source + ')'
			this.preFormData.preUserId = uni.getStorageSync("userInfo").id;
			this.preFormData.shopUserType = option.infoIndex
			this.preFormData.purchase = option.sourceIndex
		},
		methods: {
			//上传照片操作
			select(e) {
				var ids = this.preFormData.resourceIds;
				uni.showLoading({
					title: '正在上传中',
				})
				const tempFilePaths = e.tempFilePaths;
				uni.uploadFile({
					url: 'https://5330s81s15.imdo.co/purchase/preResource/upload', //仅为示例，非真实的接口地址
					// url: 'http://127.0.0.1:8081/purchase/preResource/upload', //本地的接口地址
					filePath: tempFilePaths[0],
					name: 'file',
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data)
						ids.push(res)
					},
					fail: (error) => {
						uni.showToast({
							title: '上传失败' + error,
							icon: "error"
						})
					}
				});
				this.preFormData.resourceIds = ids
				uni.hideLoading();
			},
			// 上传成功
			success(e) {
				console.log('上传成功')
			},

			// 上传失败
			fail(e) {
				uni.showToast({
					title: '上传失败' + e,
					icon: "error"
				})
			},

			//删除图片
			handleDelete(e) {
				this.preFormData.resourceIds.splice(this.preFormData.resourceIds.findIndex(item => item === e.tempFile), 1)
				console.log('删除图片:', e)
			},

			getCity(e) {
				//暂存相关的数据
				let result = ''
				var value = e.detail.value
				for (let key of value) {
					result += key.text + '-'
				}
				this.preFormData.address = result.slice(0, result.length - 1)
			},

			submit(ref) {
				//校验表单
				this.$refs[ref].validate().then(res => {
					this.preFormData.purchaseStartDays = datejs(this.preFormData.purchaseStartDays).format(
						'YYYY-MM-DD HH:mm:ss')
					var data = this.preFormData
					add_shop(data).then(result => {
						// console.log("货源信息发布成功" + JSON.stringify(result))
						uni.showModal({
							title: '货源信息发布状态',
							content: '货源信息发布成功',
							showCancel: true,
							confirmText: '取消',
							cancelText: '确定',
							success: function(res) {
								uni.showTabBar()({
									url: '/pages/tabbar/tabbar-1/tabbar-1'
								})
							}
						})
					}).catch(err => {
						uni.showModal({
							title: '货源信息发布失败',
							content: '' + err.msg,
							showCancel: false,
						})
					})
				}).catch(err => {
					console.log('货源订单异常', err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.sub-type {
		margin-top: 15px;
	}
</style>
